/*
 * @Author: yangzonglong
 * @Date: 2021-02-25 11:16:41
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-31 10:08:32
 * @Auditor:
 */
import React, { useCallback, useState } from 'react';
import { Form, Modal, Radio } from 'antd';
import Canvas from './canvas/Canvas';
// import View from './../../../view/View';
// import MobileView from '../../../mobileview/MobileView';
// import PrintView from '../../../printview/PrintView';
import useFdStore from './../../../hooks/useFdStore';
import style from './../../design.module.scss';

const bodyStyle: React.CSSProperties = {
  height: '80vh',
  overflowY: 'auto',
};

const Main = () => {
  const { state, dispatch } = useFdStore();
  const [platform, setPlatform] = useState<'pc' | 'mobile' | 'print'>('pc');

  const onCancel = useCallback(() => {
    dispatch({ preview: false });
  }, [dispatch]);


  return (
    <div className={style.main}>
      {/* <div className={style.formNameDesc}>
        <input placeholder="请输入表单名称" />
        <input placeholder="请输入表单描述" />
      </div>
      <div className={style.line}></div> */}
      <Form layout="vertical" className={`${style.ghostForm} custom`}>
        <Canvas />
      </Form>
      <Modal
        className={platform === 'mobile' ? 'modalMobile' : 'modalPc'}
        destroyOnClose
        bodyStyle={bodyStyle}
        centered
        title="预览"
        footer={null}
        onCancel={onCancel}
        visible={state.preview}
        width={platform === 'mobile' ? 375 : 1200}
      >
        <div className={platform === 'mobile' ? 'modalMDiv' : 'modalPDiv'}>
          <div className={platform === 'mobile' ? style.previewBtn : style.previewBtnPc}>
            <Radio.Group onChange={(e) => setPlatform(e.target.value)} value={platform} style={{ margin: '4px' }}>
              <Radio.Button value="pc">PC端预览</Radio.Button>
              <Radio.Button value="mobile">手机端预览</Radio.Button>
              <Radio.Button value="print">打印预览</Radio.Button>
            </Radio.Group>
          </div>
          {/* <div className={platform === 'mobile' ? style.previewBlock : style.previewBlockPc}>
            {platform === 'pc' ? (
              <View structure={state} formInfo={{ formDesc: state.formDesc, formName: state.formName }} />
            ) : platform === 'print' ? <PrintView structure={state} formInfo={{ formDesc: state.formDesc, formName: state.formName }} /> : (
              <MobileView
                structure={{ ...state, list: state?.list.map((item) => ({ ...item, options: { ...item.options, disabled: true } })) }}
                formInfo={{ formDesc: state.formDesc, formName: state.formName }}
              />
            )}
          </div> */}
        </div>
      </Modal>
    </div>
  );
};

export default Main;
